<!-- 清罐 -->
<template>
  <div class="wrap">
    <div class="top">
      <div class="dispatch_no">{{routerParams.dispatch_no}}</div>
      <div class="bottom">
        <div class="customer_name">{{routerParams.customer_name}}</div>
        <div class="vehicle_no">{{routerParams.vehicle_no}}</div>
      </div>
    </div>
    <div class="main">
      <div class="row">
        <div class="left">到厂日期:</div>
        <div class="right">
          <input v-model="date" readonly @click='openFromPicker' />
        </div>
      </div>
      <div class="row">
        <div class="left">到厂时间:</div>
        <div class="right">
          <input v-model="time" readonly @click='openTimePicker' />
        </div>
      </div>
      <div class="row">
        <div class="left">到厂备注:</div>
        <div class="right">
          <input v-model="remark" />
        </div>
      </div>
      <div class="button_wrap">
        <button @click="sure()" :disabled="routerParams.arrive_load_time&&parseInt(routerParams.arrive_load_time)!=0" style="background:#3b8ce7;color:white;">到厂确认</button>
        <button @click="cancel()" style="color:#93b2db;border:1px solid #c6c6c6;background:#f7f7f7;">取消到厂</button>
      </div>
    </div>
    <mt-datetime-picker v-model='dateFromDate' ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" @confirm="date=dateFromDate.Format('yyyy-MM-dd'); " :endDate='new Date()'>
    </mt-datetime-picker>
    <mt-datetime-picker ref="TimePicker" @confirm="time=dateFromTime" type="time" v-model="dateFromTime">
    </mt-datetime-picker>
    <!-- <img src="../../../../static/images/1.png" /> -->
  </div>

</template>
<script>
  import {
    MessageBox
  } from 'mint-ui';
  export default {
    data() {
      return {
        item: {},
        date: '', //日期
        time: '', //时间

        remark: '', //备注
        dateFromTime: '', //过度用时间,无实际作用
        routerParams: {}, //存储上一个页面传过来的参数
        dateFromDate: '', //过度用日期,无实际作用
      }
    },
    methods: {
      getParams() {
        // 取参数 
        this.routerParams = JSON.parse(sessionStorage.getItem('nineParams'));
        if (parseInt(this.routerParams.arrive_load_time)) {
          this.remark = this.routerParams.arrive_load_remark
          this.date = this.routerParams.arrive_load_time.split(' ')[0]
          this.time = this.routerParams.arrive_load_time.split(' ')[1].substr(0, 5)
        }
      },
      sure() { //到厂
        var useInfo = JSON.parse(sessionStorage.getItem("loginData"));
        var params = {
          id: this.routerParams.id,
          company_id: this.routerParams.company_id,
          dispatch_no: this.routerParams.dispatch_no,
          arrive_load_time: this.clean_pot_time,
          arrive_load_remark: this.remark,
          operator: useInfo.user_uuid
        }
        console.log('params', params);
        this.$api.post('/dispatch/csDispatchOrder/arriveLoadConfirmHandler', params, (data) => {
          MessageBox('提示', '操作成功!');
          window.history.back();
        }, (error) => {
          MessageBox('提示', error.msg);
          window.history.back();
        })
      },
      cancel() { //取消操作
        var useInfo = JSON.parse(sessionStorage.getItem("loginData"));
        var params = {
          id: this.routerParams.id,
          operator: useInfo.user_uuid,
        }
        this.$api.post('/dispatch/csDispatchOrder/arriveLoadCancelHandler', params, (data) => {
          MessageBox('提示', '操作成功!');
          window.history.back();
        })
      },
      getNowDate() { //获取当前时间
        this.date = this.$api.formatData(new Date());
        this.dateFromDate = this.$api.formatData(new Date());
        this.time = this.$api.formatTime(new Date());
        this.dateFromTime = this.$api.formatTime(new Date());
      },
      openFromPicker() {
        this.$refs.fromDatepicker.open();
      },
      openTimePicker() {
        this.$refs.TimePicker.open();
      },
    },
    created() {
      this.getNowDate();
      this.getParams();
    },
    computed: {
      clean_pot_time: function () {
        var str = this.date + ' ' + this.time
        return str;
      }, //日期加时间,用于上传,
    }
  }

</script>
<style scoped>
  .top {
    padding: 0.3rem;
    border-bottom: 3px solid #eeeeee;
  }

  .main {
    padding-top: 0.7rem;
  }

  .top .dispatch_no {
    color: black;
    font-size: 0.4rem;
    height: 0.6rem;
    font-weight: bold;
    text-align: left;
    line-height: 0.6rem;
  }

  .bottom {
    display: flex;
  }

  .customer_name {
    font-weight: bold;
  }

  .vehicle_no {
    margin: 0 0.4rem;
  }

  .row {
    display: flex;
    height: 1rem;
  }

  .row .left {
    width: 2.5rem;
    text-align: right;
    line-height: 0.9rem;
    height: 0.9rem;
  }

  .row .right {
    width: 6rem;
    margin-left: 0.2rem;
    text-align: left;
  }

  .row .right input {
    height: 0.9rem;
    line-height: 0.9rem;
    padding-left: 0.1rem;
    border: none;
    outline: none;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }

  .paizhao {
    width: 1.2rem;
  }

  .img_wrap_wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .img_wrap {
    position: relative;
    width: 1.2rem;
    margin-right: 0.3rem;
  }

  .img_wrap img {
    width: 100%;
  }

  .delete {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url('../../../../static/images/other/delete.png');
    background-size: 100% 100%;
    width: 0.5rem;
    height: 0.5rem;
  }

  .button_wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
  }

  .button_wrap button {
    padding: 0.45rem 0.55rem 0.4rem;
    border: none;
    font-size: 0.6rem;
    border-radius: 0.2rem;
    margin-right: 0.3rem;
  }

</style>
